import {
  Form,
  Row,
  Button,
  Input,
  Select,
  TreeSelect,
  Switch,
  message,
} from 'antd';
import { useNavigate } from 'react-router-dom';
import { ModalList } from '../../api/modalManage';
import { useEffect, useState } from 'react';
import { columnList, columnAdd } from '../../api/columnManage';
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 10,
  },
};
const tailLayout = {
  wrapperCol: { span: 24 },
};
export default function ColumnManageHandle() {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const [modalOptions, setModalOptions] = useState([]);
  const [modalTree, setModalTree] = useState([]);
  const [messageApi, contextHolder] = message.useMessage();

  useEffect(() => {
    ModalList().then(({ data }) => {
      let options = data.data.map((d) => {
        return {
          value: d.id,
          label: d.name,
        };
      });
      setModalOptions(options);
    });
    columnList().then(({ data }) => {
      setModalTree(data.data);
    });
  }, []);
  const rules = {
    name: [{ required: true }],
    modalId: [{ required: false }],
    parentId: [{ required: false }],
    isHot: [{ required: false }],
    isShow: [{ required: false }],
    route: [{ required: false }],
  };
  function goBack() {
    navigate(-1);
  }

  function onFinish(values) {
    console.log('栏目新增数据', values);
    let data = {
      ...values,
      isHot: values.isHot ? 1 : 0,
      isShow: values.isShow ? 1 : 0,
    };
    console.log('栏目新增数据', data);
    columnAdd({ data }).then(({ data }) => {
      messageApi.open({
        type: 'success',
        content: '栏目保存成功',
      });
    });
  }
  return (
    <>
      {contextHolder}
      <Form {...layout} form={form} name='column-form' onFinish={onFinish}>
        <Form.Item name='name' label='栏目名称' rules={rules.name}>
          <Input placeholder='请输入栏目名称'></Input>
        </Form.Item>
        <Form.Item name='modalId' label='所属模板' rules={rules.modalId}>
          <Select placeholder='请选择所属模板' options={modalOptions}></Select>
        </Form.Item>
        <Form.Item name='parentId' label='上级栏目' rules={rules.parentId}>
          <TreeSelect
            placeholder='请选择上级栏目'
            treeData={modalTree}
            fieldNames={{ label: 'name', value: 'id', children: 'children' }}
          ></TreeSelect>
        </Form.Item>
        <Form.Item name='route' label='栏目路由' rules={rules.route}>
          <Input placeholder='请输入栏目路由'></Input>
        </Form.Item>
        <Form.Item
          name='isShow'
          label='显示/隐藏'
          rules={rules.isShow}
          valuePropName='checked'
        >
          <Switch checkedChildren='显示' unCheckedChildren='隐藏' />
        </Form.Item>
        <Form.Item
          name='isHot'
          label='热门栏目'
          rules={rules.isHot}
          valuePropName='checked'
        >
          <Switch checkedChildren='是' unCheckedChildren='否' />
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Row justify='center'>
            <Button onClick={goBack}>取消</Button>
            <Button
              type='primary'
              htmlType='submit'
              style={{ marginLeft: '30px' }}
            >
              保存
            </Button>
          </Row>
        </Form.Item>
      </Form>
    </>
  );
}
